<template>
    <div>
        <h1>添加货物类别</h1>
        <el-button type="primary" style="float: right;">确认添加</el-button>
        <br><br>
        <div>
            <label for="">设备类型 :</label>&nbsp;&nbsp;
            <el-input type="text" name="" id="" v-model="type" style="width: 200px;"
            placeholder="请输入设备类型"></el-input>
            <br><br>

            <label for="">名称 :</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-input type="text" name="" id="" v-model="name" style="width: 200px;"
            placeholder="请输入名称"></el-input>
            <br><br>

            <label for="">延迟开始 :</label>&nbsp;&nbsp;
            <!-- y_time代表延迟开始 -->
            <el-input type="text" name="" id="" v-model="y_time" style="width: 200px;"
            placeholder="请输入延迟开始时间"></el-input>
            <br><br>

            <label for="">描述 :</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-input type="text" name="" id="" v-model="desc" style="width: 200px;"
            placeholder="请输入描述内容"></el-input>
            <br><br>

            <label for="">记录间隔 :</label>&nbsp;&nbsp;
            <el-input type="text" name="" id="" v-model="interval" style="width: 200px;"
            placeholder="请输入记录间隔时间"></el-input>

            <br><br><br>

            <label for="">理想温度范围 :</label>
            ≥ <el-input type="text" name="" id="" v-model="first_temp" style="width: 230px;"
            placeholder="理想温度范围大于等于输入的值"></el-input>
            &nbsp;&nbsp;&nbsp;&nbsp;
            ≤ <el-input type="text" name="" id="" v-model="last_temp" style="width: 230px;"
            placeholder="理想温度范围小于等于输入的值"></el-input>
        </div>     
        <br><br>
        <div>
            <div style="float: left;width: 500px;height: 300px;">
                <div>
                    <el-tag>报警设置-{{ alarm_1 }}</el-tag>
                    <el-switch
                        style="float: right;"
                        v-model="value_1"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        inactive-text='启用'>
                    </el-switch>
                </div>
                <br>

                <div v-if="value_1 != false">
                    <p>报警类型 :</p>
                    <el-select v-model="o_value_one" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <!-- {{ o_value_one }} -->
                    <br>
                    <br>
                    <div v-if="o_value_one != '单温度范围-累计事件'">
                        <p>温度范围 :</p>
                        <el-input type="text" name="" id="" v-model="temp_1"></el-input>
                        <br>
                    </div>
                    <div v-else>
                        <p>温度范围 :</p>
                         > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                         v-model="trf_1"></el-input>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                         < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                         v-model="trl_1"></el-input>
                         <br>
                    </div>
                    <br>
                    <p>阈值 :</p>
                    <el-input type="text" name="" id="" style="width: 175px;" v-model="threshold_1"></el-input>  
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-select v-model="time_value_one" placeholder="请选择">
                        <el-option
                            v-for="item in time_list"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>               
                </div>
                <div v-else>
                    <p style="color: red;">未开启报警设置</p>
                </div>

            </div>

            <div style="float: left;width: 500px;height: 300px;">
                <div>
                    <el-tag>报警设置-{{ alarm_2 }}</el-tag>
                    <el-switch
                        style="float: right;"
                        v-model="value_2"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        inactive-text='启用'>
                    </el-switch>
                </div>
                <br>

                <div v-if="value_2 != false">
                    <p>报警类型 :</p>
                    <el-select v-model="o_value_two" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <br>
                    <br>
                    <div v-if="o_value_two != '单温度范围-累计事件'">
                        <p>温度范围 :</p>
                        <el-input type="text" name="" id="" v-model="temp_2"></el-input>
                        <br>
                    </div>
                    <div v-else>
                        <p>温度范围 :</p>
                        > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                        v-model="trf_2"></el-input>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                        v-model="trl_2"></el-input>
                        <br>
                    </div>
                    <br>
                    <p>阈值 :</p>
                    <el-input type="text" name="" id="" style="width: 175px;"
                    v-model="threshold_2"></el-input> 
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
                    <el-select v-model="time_value_two" placeholder="请选择">
                        <el-option
                            v-for="item in time_list"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div v-else>
                    <p style="color: red;">未开启报警设置</p>
                </div>
                
            </div>

            <div style="float: left;width: 500px;height: 300px;">
                <div>
                    <el-tag>报警设置-{{ alarm_3 }}</el-tag>
                    <el-switch
                        style="float: right;"
                        v-model="value_3"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        inactive-text='启用'>
                    </el-switch>
                </div>
                <br>

                <div v-if="value_3 != false">
                    <p>报警类型 :</p>
                    <el-select v-model="o_value_three" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <br>
                    <br>
                    <div v-if="o_value_three != '单温度范围-累计事件'">
                        <p>温度范围 :</p>
                        <el-input type="text" name="" id="" v-model="temp_3"></el-input>
                        <br>
                    </div>
                    <div v-else>
                        <p>温度范围 :</p>
                        > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                        v-model="trf_3"></el-input>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                        v-model="trl_3"></el-input>
                        <br>
                    </div>
                    <br>
                    <p>阈值 :</p>
                    <el-input type="text" name="" id="" style="width: 175px;"
                    v-model="threshold_3"></el-input>  
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-select v-model="time_value_three" placeholder="请选择">
                        <el-option
                            v-for="item in time_list"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select> 
                </div>
                <div v-else>
                    <p style="color: red;">未开启报警设置</p>
                </div>

            </div>


            <br><br>


            <div style="float: left;width: 500px;height: 300px;"> 
                <div>
                    <el-tag>报警设置-{{ alarm_4 }}</el-tag>
                    <el-switch
                        style="float: right;"
                        v-model="value_4"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        inactive-text='启用'>
                    </el-switch>
                </div>
                <br>
                <div v-if="value_4 != false">
                    <p>报警类型 :</p>
                    <el-select v-model="o_value_four" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <br>
                    <br>
                    <div v-if="o_value_four != '单温度范围-累计事件'">
                        <p>温度范围 :</p>
                        <el-input type="text" name="" id="" v-model="temp_4"></el-input>
                        <br>
                    </div>
                    <div v-else>
                        <p>温度范围 :</p>
                        > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                        v-model="trf_4"></el-input>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                        v-model="trf_4"></el-input>
                        <br>
                    </div>
                    <br>
                    <p>阈值 :</p>
                    <el-input type="text" name="" id="" style="width: 175px;"
                    v-model="threshold_4"></el-input> 
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-select v-model="time_value_four" placeholder="请选择">
                        <el-option
                            v-for="item in time_list"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>  
                </div>
                <div v-else>
                    <p style="color: red;">未开启报警设置</p>
                </div>

            </div>

            <div style="float: left;width: 500px;height: 300px;">
                <div>
                    <el-tag>报警设置-{{ alarm_5 }}</el-tag>
                    <el-switch
                        style="float: right;"
                        v-model="value_5"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        inactive-text='启用'>
                    </el-switch>
                </div>
                <br>
                <div v-if="value_5 != false">
                    <p>报警类型 :</p>
                    <el-select v-model="o_value_five" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <br>
                    <br>
                    <div v-if="o_value_five != '单温度范围-累计事件'">
                        <p>温度范围 :</p>
                        <el-input type="text" name="" id="" v-model="temp_5"></el-input>
                        <br>
                    </div>
                    <div v-else>
                        <p>温度范围 :</p>
                        > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                        v-model="trf_5"></el-input>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                        v-model="trl_5"></el-input>
                        <br>
                    </div>
                    <br>
                    <p>阈值 :</p>
                    <el-input type="text" name="" id="" style="width: 175px;"
                    v-model="threshold_5"></el-input> 
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                    <el-select v-model="time_value_five" placeholder="请选择">
                        <el-option
                            v-for="item in time_list"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select> 
                </div>
                <div v-else>
                    <p style="color: red;">未开启报警设置</p>
                </div>

            </div>

            <div style="float: left;width: 500px;height: 300px;">
                <div>
                    <el-tag>报警设置-{{ alarm_6 }}</el-tag>
                    <el-switch
                        style="float: right;"
                        v-model="value_6"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        inactive-text='启用'>
                    </el-switch>
                </div>
                <br>
                <div v-if="value_6 != false">
                    <p>报警类型 :</p>
                    <el-select v-model="o_value_six" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <br>
                    <br>
                    <div v-if="o_value_six != '单温度范围-累计事件'">
                        <p>温度范围 :</p>
                        <el-input type="text" name="" id="" v-model="temp_6"></el-input>
                        <br>
                    </div>
                    <div v-else>
                        <p>温度范围 :</p>
                        > &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                        v-model="trf_6"></el-input>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        < &nbsp;<el-input type="text" name="" id="" style="width: 175px;"
                        v-model="trl_6"></el-input>
                        <br>
                    </div>
                    <br>
                    <p>阈值 :</p>
                    <el-input type="text" name="" id="" style="width: 175px;"
                    v-model="threshold_6"></el-input>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-select v-model="time_value_six" placeholder="请选择">
                        <el-option
                            v-for="item in time_list"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>   
                </div>
                <div v-else>
                    <p style="color: red;">未开启报警设置</p>
                </div>
            </div>
        </div>
        
    </div>
</template>


<script>
export default {
    data() {
        return {
            //定义报警设置警报参数(主警报1,主警报2等)
            alarm_1:'主警报1',
            alarm_2:'主警报2',
            alarm_3:'主警报3',
            alarm_4:'主警报4',
            alarm_5:'主警报5',
            alarm_6:'主警报6',
            
            //定义启用按钮参数
            value_1: false,
            value_2: false,
            value_3: false,
            value_4: false,
            value_5: false,
            value_6: false,

            //定义报警类型下拉框列表
            options: [{
                value: '单温上限-单个事件',
                label: '单温上限-单个事件'
            }, {
                value: '单温下限-单个事件',
                label: '单温下限-单个事件'
            }, {
                value: '单温度范围-累计事件',
                label: '单温度范围-累计事件'
            }],

            //定义下拉框绑定value值参数
            o_value_one:'',
            o_value_two:'',
            o_value_three:'',
            o_value_four:'',
            o_value_five:'',
            o_value_six:'',

            //定义阈值下拉框列表
            time_list: [{
                value: '分钟',
                label: '分钟'
            }, {
                value: '小时',
                label: '小时'
            }, {
                value: '天',
                label: '天'
            }],

            //定义阈值下拉框绑定value值参数
            time_value_one:'',
            time_value_two:'',
            time_value_three:'',
            time_value_four:'',
            time_value_five:'',
            time_value_six:'',


            //定义input框绑定的v-model数据(不包含报警设置)
            type:'',            //设备类型
            name:'',            //货物名称
            y_time:'',          //延迟开始(延迟时间)
            desc:'',            //描述信息
            interval:'',        //记录间隔(间隔时间)
            first_temp:'',      //理想温度范围(最低值)
            last_temp:'',       //理想温度范围(最高值)

            //定义报警设置功能中的input框绑定的v-model数据
            temp_1:'',     //报警设置温度范围输入框数据(一)
            temp_2:'',     //报警设置温度范围输入框数据(二)
            temp_3:'',     //报警设置温度范围输入框数据(三)
            temp_4:'',     //报警设置温度范围输入框数据(四)
            temp_5:'',     //报警设置温度范围输入框数据(五)
            temp_6:'',     //报警设置温度范围输入框数据(六)
            
            threshold_1:'',//报警设置阈值信息输入框数据(一)
            threshold_2:'',//报警设置阈值信息输入框数据(二)
            threshold_3:'',//报警设置阈值信息输入框数据(三)
            threshold_4:'',//报警设置阈值信息输入框数据(四)
            threshold_5:'',//报警设置阈值信息输入框数据(五)
            threshold_6:'',//报警设置阈值信息输入框数据(六)

            //trf代表   temp_range_first  就是左侧的大于某某温度
            trf_1:'',      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(一)
            trf_2:'',      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(二)
            trf_3:'',      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(三)
            trf_4:'',      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(四)
            trf_5:'',      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(五)
            trf_6:'',      ////报警设置(单温度范围-累计事件)中大于某某温度的输入框数据(六)

            //trl代表   temp_range_last  就是右侧的小于某某温度
            trl_1:'',      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(一)
            trl_2:'',      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(二)
            trl_3:'',      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(三)
            trl_4:'',      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(四)
            trl_5:'',      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(五)
            trl_6:'',      ////报警设置(单温度范围-累计事件)中小于某某温度的输入框数据(六)

            
        }
    },
}
</script>


<style>

</style>